<template>
  <div class="side">
    <div class="side-head">①检查伴生气压缩机进气压力</div>

    <div class="side-content1">
      <div class="side-content">
        <div class="side-echarts1"></div>
        <div class="side-table1">
          <table>
            <tr class="title">
              <th>设备</th>
              <th>压力(Mpa)</th>
              <th>时间</th>
            </tr>
            <tr class="item">
              <td class="item-td">反应器</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
            <tr class="item">
              <td class="item-td">净化水罐</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
            <tr class="item">
              <td class="item-td">缓冲罐</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
          </table>
        </div>
      </div>
      <div style="color: rgba(255,255,255,1);font-size: 20px;font-family: Arial;font-weight: 700;line-height: 28px;margin-top:20px;padding:10px">伴生气压缩机频率过低，系统出气不畅，导致蒸汽分离器压力升高</div>
    </div>
    <div class="side-head">②检查伴生气压缩机运行频率</div>
    <div class="side-content2">
      <div class="side-content">
        <div class="side-echarts2"></div>
        <div class="side-table2">
          <table>
            <tr class="title">
              <th>设备</th>
              <th>频率(HZ)</th>
              <th>时间</th>
            </tr>
            <tr class="item">
              <td class="item-td">反应器</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
            <tr class="item">
              <td class="item-td">净化水罐</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
            <tr class="item">
              <td class="item-td">缓冲罐</td>
              <td class="item-td">15.1</td>
              <td class="item-td">14：10</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEcharts();
  },
  data() {
    return {
      // 配置项
      option1: {
        // 标头
        legend: {
          data: ["压力"],
          textStyle: {
            fontSize: 12,
            color: "white",
          },
        },
        // 网格线位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 保存为图片
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 拐点颜色
        itemStyle: {
          borderColor: "#E9CD4B",
        },
        // 字体颜色
        textStyle: {
          color: "#ff9d16",
        },
        xAxis: {
          type: "category",
          data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50", "14:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [2.1, 2.3, 3.1, 4.1, 4.2, 5.1, 6.2],
            type: "line",
            name: "压力",
            // 显示数值
            itemStyle: { normal: { label: { show: true } } },
            // 线条颜色
            lineStyle: {
              width: 3,
              color: "#ff9d16",
            },
          },
        ],
      },
      option2: {
        // 标头
        legend: {
          data: ["频率"],
          textStyle: {
            fontSize: 12,
            color: "white",
          },
        },
        // 网格线位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 保存为图片
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 拐点颜色
        itemStyle: {
          borderColor: "#E9CD4B",
        },
        // 字体颜色
        textStyle: {
          color: "#ff9d16",
        },
        xAxis: {
          type: "category",
          data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50", "14:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [2.1, 2.3, 3.1, 4.1, 4.2, 5.1, 6.2],
            type: "line",
            name: "频率",
            // 显示数值
            itemStyle: { normal: { label: { show: true } } },
            // 线条颜色
            lineStyle: {
              width: 3,
              color: "#ff9d16",
            },
          },
        ],
      },
    };
  },

  methods: {
    // 初始化表格
    initEcharts() {
      // 表1
      var myChart = this.$echarts.init(
        document.querySelector(".side-echarts1")
      );

      myChart.setOption(this.option1);

      // 表2
      var myChart2 = this.$echarts.init(
        document.querySelector(".side-echarts2")
      );

      myChart2.setOption(this.option2);
      window.addEventListener("resize", function () {
        myChart.resize();
        myChart2.resize();
      });
    },
  },
};
</script>

<style scoped>
.side {
  /* border: solid 1px #75f9fd; */
  margin: 10px;
}

/* 头部 */
.side-head {
  height: 50px;
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 10px;
  color: rgba(117, 249, 253, 1);
  font-size: 20px;
  font-family: Arial;
  font-weight: 700;
}
/* 图表 */
.side-echarts1,
.side-echarts2 {
  flex: 1;
}

.side-content{
  display: flex;
  padding: 10px;
}

.side-content1,
.side-content2 {
  border: 1px solid #00fff9;
  margin-bottom: 10px;
}
/* 表格 */
.side-table1,
.side-table2 {
  flex: 1;
  margin: 10px;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
  font-size: 12px;
}
table,
th,
td {
  border: 1px solid black;
}
th {
  width: 100vw;

  color: white;
}
.title {
  height: 40px;
  background-color: skyblue;
}
.item {
  height: 40px;
  background-color: yellowgreen;

  text-align: center;
  color: #05b2d1;
}
/* 偶数行 */
tr:nth-child(2n) {
  background-color: #125a69;
}
/* 奇数行 */
tr:nth-child(2n + 1) {
  background-color: #0e425b;
}
</style>